<template>
  <div class="edit-form edit-dialog">
    <el-form
      :model="state.editForm"
      ref="editFormRef"
      label-width="130px"
      class="demo-editData"
      v-loading="loading"
    >
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            流程编码
          </template>
          <el-form-item prop="code" :rules="$formRules.input">
            <el-input
              type="text"
              clearable
              v-model="state.editForm.code"
              placeholder="请输入"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            流程名称
          </template>
          <el-form-item prop="name" :rules="$formRules.input">
            <el-input
              type="text"
              clearable
              v-model="state.editForm.name"
              placeholder="请输入"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
<!--        <el-descriptions-item>-->
<!--          <template #label>-->
<!--            <span class="colorRed">*</span>-->
<!--            启用状态-->
<!--          </template>-->
<!--          <el-form-item prop="status" :rules="$formRules.select">-->
<!--            <pubDictRadio-->
<!--              v-model="state.editForm.status"-->
<!--              dict-code="QYZT"-->
<!--              type="Number"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item>
          <template #label>备注</template>
          <el-form-item>
            <el-input
              type="textarea"
              maxlength="200"
              show-word-limit
              v-model="state.editForm.remark"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>

    <div class="btn-group">
      <el-button class="btn-form-close" @click="close()">取消</el-button>
      <el-button
        class="btn-form-save"
        type="primary"
        :loading="btnLoading"
        v-prevent-repeat-click
        @click="submitForm(editFormRef)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'

const props = defineProps({
  data: Object,
})
const loading = ref(false)
const btnLoading = ref(false)
const state = reactive({
  editForm: {}
})
const popTitle = ref('选择')
const editFormRef = ref(null)
const emit = defineEmits(['close', 'submitForm'])


const close = () => {
  emit('close')
}

const load = () => {
  loading.value = false
  btnLoading.value = false
}

const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      btnLoading.value = true
      emit('save', state.editForm)
    }
  })
}

defineExpose({
  load
})
onBeforeMount(() => {
  state.editForm = props.data
})
</script>
<style scoped></style>
